import * as Util from '../util.js';

export default class Router {
    constructor(routers) {
        this.routers = routers
        this.init()
    }
    // 挂载路由切换函数
    static bindRouteChange(url) {
        window.location.hash = url
    }
    bindEventforRoute(routerDom) {
        routerDom.forEach(dom => {
            dom.addEventListener('click', function (event) {
                if (event.target.tagName === 'ROUTE') {
                    window.location.hash = event.target.dataset.hash
                }
            })
        });
    }
    getRoute(routers) {
        for (let i = 0; i < routers.length; i++) {
            const route = routers[i];
            console.log('route', route.isActiveRoute)
            if (route.isActiveRoute(window.location.hash.substr(1))) {
                this.goToRoute(route)
                return
            }
            if (route.childRoute.length > 0) {
                this.getRoute(route.childRoute)
            }
        }
    }
    getDefaultRoute(routers) {
        for (let i = 0; i < routers.length; i++) {
            const route = routers[i];
            if (route.default) {
                this.goToRoute(route)
                return
            }
            if (route.childRoute.length > 0) {
                this.getDefaultRoute(route.childRoute)
            }
        }
    }
    goToRoute(route) {
        console.log('hasha')
        var self = this
        var xhr = new XMLHttpRequest()
        xhr.onreadystatechange = function () {
            if (this.readyState === 4 && this.status === 200) {
                var array = route.name.substr(1).split('/')
                for (let i = 0; i < array.length; i++) {
                    if (array.length === (i + 1)) {

                        let root = Util.$(Array(i + 1).fill('RouterView').join(' '))
                        console.log(`${i + 1}级路由`, root)
                        // 首次加载多级路由的解决办法
                        if (root === null) {
                            root = Util.$('RouterView')
                            // window.location.hash = '/about/personal'
                        }
                        root.innerHTML = ''
                        root.appendChild(Util.domFromStringByFragment(this.responseText));
                        self.bindEventforRoute(Util.$$('Router'))
                        return
                    }
                }
            }
        }
        xhr.open('GET', `view/${route.htmlName}`, true)
        xhr.send()
    }
    hashRefresh(routers) {
        if (window.location.hash.length > 0) {
            this.getRoute(routers)
        } else {
            // 初次加载或路径为 "/"
            this.getDefaultRoute(routers)
        }
    }
    init() {
        console.log('get routers', this.routers[0].domElem)
        var self = this
        window.addEventListener('hashchange', function (e) {
            console.log('change')
            self.hashRefresh(self.routers)
        })
        window.addEventListener('load', function (e) {
            self.hashRefresh(self.routers)
        })
        window.$to = Router.bindRouteChange
    }
}
